<template>
  <div class="app-container">
    <main>
      <!-- 直接玩 -->
      <iframe
        v-if="quanxian"
        :src="
          gameData.meta_description +
          '?gd_sdk_referrer_url=https://www.nvgamebox.com/'
        "
        :allowfullscreen="true"
        sandbox="allow-same-origin allow-scripts"
        frameborder="0"
      ></iframe>
      <!-- 付费 -->
      <div v-else class="pay-box">
        <div v-if="game_price" class="content">
          <img :src="gameData.images[0].popup" alt="" />
          <p class="name">{{ gameData.name }}</p>
          <p class="text">
            You can unlock this game with
            <span> {{ game_price }}</span> coins
          </p>
          <el-button @click="handleOpen" size="small"> PAY </el-button>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { productDetails, gameLikesAdd } from "@/api/product";
import { userSpecies, gameOrders, gamePay } from "@/api/user";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const route = useRoute();
const router = useRouter();
const store = useStore();
const quanxian = ref(false);

// 获取游戏详情
const game_price = ref("");
const gameData = ref({
  meta_description: "",
  images: [{ popup: "" }],
});
const getGameData = () => {
  productDetails(route.query.id).then((res) => {
    gameData.value = res.data.product;
    // console.log(gameData.value);

    // 判断是否需要购买
    gameOrders(route.query.id).then((res) => {
      game_price.value = res.data.cost_price;
      // console.log(res.data);

      if (res.data.cost_price === 0) {
        quanxian.value = true;
        return;
      }

      if (res.data.isProductPurchased) {
        quanxian.value = true;
      }
    });
  });
};
getGameData();

// 点击按钮
const handleOpen = () => {
  // 判断余额是否可以购买
  userSpecies().then((res) => {
    if (res.data.price >= game_price.value) {
      // 支付
      ElMessageBox.confirm(
        `You will unlock this game with ${game_price.value} coins !`,
        {
          confirmButtonText: "sure",
          cancelButtonText: "cancel",
          customClass: "messageBox",
          type: "",
          showClose: false,
        }
      )
        .then(() => {
          handlePay();
        })
        .catch(() => {});
    } else {
      // 余额不足
      ElMessageBox.confirm("Insufficient balance , need to purchase coins!", {
        confirmButtonText: "sure",
        cancelButtonText: "cancel",
        customClass: "messageBox",
        type: "",
        showClose: false,
      })
        .then(() => {
          router.push("/account/pay");
        })
        .catch(() => {});
    }
  });
};

// 支付
const handlePay = () => {
  gamePay({ productId: route.query.id }).then(() => {
    ElMessage({
      message: "Purchase success!",
      type: "success",
    });
    quanxian.value = true;
  });
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 10px;
  width: 100%;
  height: 100vh;
  background: #1d1d24;

  main {
    width: 100%;
    height: 100%;
    position: relative;
    iframe {
      width: 100%;
      height: 100%;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    .pay-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #4c4b4b;
      display: flex;
      justify-content: center;
      align-items: center;
      .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          margin-bottom: 30px;
          width: 300px;
          height: 180px;
          border-radius: 4px;
        }
        .name {
          margin-bottom: 10px;
          font-size: 14px;
          font-weight: 700;
          color: #8d8d8d;
        }
        .text {
          margin-bottom: 20px;
          font-size: 14px;
          color: #8d8d8d;
          span {
            color: #fff;
          }
        }
        .el-button {
          border: none;
          color: #8d8d8d;
          background: #151517;
          &:hover {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>